<template>
  <SplitLayout>
    <div slot="top" class="header-top">
      <SearchForm @query="onQuery" @reset="onResetForm" style="margin:20px 0 0 20px;">
        <SearchFormItem label="发现时间：">
          <!-- <a-range-picker v-model="rangeTime" @change="onTimeChange" valueFormat="YYYY-MM-DD" style="width: 100%" /> -->
          <span class="date-range-picker">
            <a-date-picker
              v-model="pageFilter.foundTimeStart"
              placeholder="开始日期"
              :disabled-date="disabledStartDate"
              valueFormat="YYYY-MM-DD"
              @openChange="handleOpenChange($event, 'start')"
            />
            <span class="line">-</span>
            <a-date-picker
              v-model="pageFilter.foundTimeEnd"
              placeholder="结束日期"
              :disabled-date="disabledEndDate"
              valueFormat="YYYY-MM-DD"
              :open="endOpen"
              @openChange="handleOpenChange($event, 'end')"
            />
          </span>
        </SearchFormItem>
        <SearchFormItem label="诈骗类型" style="width:280px;">
          <j-dict-select-tag
            v-model="pageFilter.szType"
            placeholder="请选择"
            dictCode="fraud_type"
            style="width: 100%"
          />
        </SearchFormItem>
        <SearchFormItem label="涉诈等级：" style="width:280px;">
          <a-select style="width:100%;" v-model="pageFilter.szLevel" placeholder="请选择">
            <a-select-option v-for="(item, index) in szLevelOption" :key="index" :value="item.value">
              {{ item.label }}</a-select-option
            >
          </a-select>
        </SearchFormItem>
        <SearchFormItem label="涉诈网站：" style="width:280px;">
          <a-input v-model="pageFilter.szWebsite" placeholder="请输入涉诈网站" />
        </SearchFormItem>
      </SearchForm>
    </div>
    <div class="con-content">
      <div class="con-content-top" :gutter="16" style="display:flex;">
        <a-button @click="onImport" type="primary">导入</a-button>
        <downLoadComponents
          ref="downLoadComponents"
          :formData="exportDowmData"
          :apiUrl="downUrl"
          :fileText="fileText + '.xls'"
        >
          <a-button type="primary" @click="onExportDowm">
            导出
          </a-button>
        </downLoadComponents>
      </div>
      <div class="con-content-list">
        <CustomTable
          ref="table"
          :showAlert="false"
          :columns="columns"
          :loading="loading"
          :dataSource="pageData"
          :showSelection="true"
          @selectedRowKey="onSelectedRow"
          @change="onTableChange"
          rowKey="id"
        >
          <template slot="latestSourceFlag" slot-scope="text">
            <span v-if="text == 1">国家中心</span>
            <span v-if="text == 2">公安导入</span>
            <span v-if="text == 6">吉林省反炸专业平台</span>
          </template>
          <template slot="szLevel" slot-scope="text">
            <span class="zt zt2" v-if="text == 2">低危</span>
            <span class="zt zt3" v-if="text == 3">中危</span>
            <span class="zt zt4" v-if="text == 4">高危</span>
            <span class="zt zt5" v-if="text == 5">紧急</span>
            <span class="zt zt1" v-if="text == 6">其他</span>
          </template>
          <!-- <template slot="szType" slot-scope="text">
            <span v-if="text == 1">全部</span>
            <span v-if="text == 2">贷款类</span>
            <span v-if="text == 3">杀猪盘类</span>
            <span v-if="text == 4">刷单类</span>
            <span v-if="text == 5">仿冒客服类</span>
            <span v-if="text == 6">虚假购物</span>
            <span v-if="text == 7">假冒熟人</span>
            <span v-if="text == 8">仿冒公务员</span>
            <span v-if="text == 9">投资理财类</span>
            <span v-if="text == 10">注销“校园贷”</span>
            <span v-if="text == 11">买卖游戏币</span>
            <span v-if="text == 12">其他</span>
          </template> -->
        </CustomTable>
        <draggerUploadFiles
          :downloadFileAddr="`${downloadFileAddr}xlsx/${templatesDeptName}`"
          :downloadFileName="downloadFileNameDept"
          :importExcelUrl="importExcelUrl"
          :isLoadServerFile="true"
          v-if="UploadFilesBool"
          @getDatas="getDatas"
          ref="draggerUploadFiles"
        />
        <statusTips :data="statusData" ref="statusTips" />
      </div>
    </div>
  </SplitLayout>
</template>
<script>
import SearchForm from '@/components/zxd/SearchForm'
const SearchFormItem = SearchForm.Item
import { SplitLayout } from '@/components/zxd/layouts'
import CustomTable from '@/components/zxd/Table/CustomTable'
import downLoadComponents from '@/components/zxd/downLoad'
import { serviceName, listFeedbackManagement } from '@/api/modules/feedbackManagement.js'
import draggerUploadFiles from '@/components/zxd/upload/draggerUploadFiles'
import statusTips from '../earlyWarning/strategy/components/statusTips.vue'
export default {
  components: {
    SearchForm,
    SearchFormItem,
    CustomTable,
    SplitLayout,
    downLoadComponents,
    draggerUploadFiles,
    statusTips
  },
  data() {
    return {
      pageData: [],
      endOpen: false,
      loading: false,
      columns: [
        {
          title: '涉诈网站',
          dataIndex: 'szWebsite',
          align: 'center',
          scopedSlots: { customRender: 'szWebsite' }
        },
        {
          title: '涉诈等级',
          dataIndex: 'szLevel',
          align: 'center',
          scopedSlots: { customRender: 'szLevel' }
        },
        {
          title: '涉诈类型',
          dataIndex: 'szType',
          align: 'center',
          scopedSlots: { customRender: 'szType' }
        },
        {
          title: '发现时间',
          dataIndex: 'foundTime',
          align: 'center'
        },
        {
          title: '导入时间',
          dataIndex: 'importTime',
          align: 'center'
        },
        {
          title: '用户账号',
          dataIndex: 'operatingName',
          align: 'center'
        }
      ],
      pageFilter: {
        pageNo: 1, // 当前页数
        pageSize: 10 // 每页显示几条数据
      },
      exportDowmData: {},
      rangeTime: undefined,
      fileText: '回馈管理列表',
      downUrl: `${serviceName}/feedback/feedbackManagent/exportXls`,
      tagFlagArr: [],
      isSelected: true,
      operation: '1',
      totalListArr: [],
      maxTotal: 0,
      sLoading: false,
      downloadFileAddr: process.env.BASE_URL, //下载模版文件地址
      templatesDeptName: 'importTemplatesDesignateDept.xlsx',
      downloadFileNameDept: '回馈管理列表导入模板.xlsx', //下载模版文件名称-指派部门
      exportXlsFileName: '回馈管理列表-导出',
      importExcelUrl: `${serviceName}/feedback/feedbackManagent/importFeedbackExcel`, //excel导入地址
      UploadFilesBool: false,
      statusData: {},
      szLevelOption: [
        {
          label: '全部',
          value: 1
        },
        {
          label: '低危',
          value: 2
        },
        {
          label: '中危',
          value: 3
        },
        {
          label: '高危',
          value: 4
        },
        {
          label: '紧急',
          value: 5
        },
        {
          label: '其他',
          value: 6
        }
      ]
    }
  },
  mounted() {
    this.refreshTable()
  },
  methods: {
    onSelectedRow(keys) {
      this.exportDowmData.idList = keys
      this.isSelected = keys.length > 0 ? false : true
    },
    onTabDownClick(index) {
      this.$set(this.tagFlagArr, index, !this.tagFlagArr[index])
    },
    onTimeChange(date, dateString) {
      this.pageFilter.foundTimeStart = dateString[0]
      this.pageFilter.foundTimeEnd = dateString[1]
      this.rangeTime = date
    },
    refreshTable() {
      this.loading = true
      listFeedbackManagement(this.pageFilter)
        .then(res => {
          if (res.success) {
            this.pageData = res.result
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.loading = false
        })
    },
    onQuery() {
      this.$refs.table.onClearRowKeys()
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.$refs.table.onClearRowKeys()
      this.rangeTime = undefined
      this.pageFilter = {
        pageNo: 1, // 当前页数
        pageSize: 10 // 每页显示几条数据
      }
      this.refreshTable()
    },
    onExportDowm() {
      this.exportDowmData.feedbackManagentQueryVO = {
        foundTimeEnd: this.pageFilter.foundTimeEnd,
        foundTimeStart: this.pageFilter.foundTimeStart,
        szWebsite: this.pageFilter.szWebsite,
        szType: this.pageFilter.szType,
        szLevel: this.pageFilter.szLevel
      }
      // console.log(this.exportDowmData)
      this.$refs.downLoadComponents.exportDowmPOST()
      // this.$refs.table.onClearRowKeys()
    },
    onImport() {
      this.UploadFilesBool = true
      this.$nextTick(() => {
        this.$refs.draggerUploadFiles.visible = true
      })
    },
    // 导入或者增加，成功后显示提示
    getDatas(val) {
      console.log(val)
      if (val && val.code === 200) {
        this.statusData = val ? val : {}
        this.$refs.statusTips.visible = true
        this.$refs.statusTips.closeTime = 3
        var auth_timetimer = setInterval(() => {
          this.$refs.statusTips.closeTime--
          if (this.$refs.statusTips.closeTime <= 0) {
            this.$refs.statusTips.visible = false
            this.UploadFilesBool = false
            this.refreshTable()
            clearInterval(auth_timetimer)
          }
        }, 1000)
      }
    },
    onTableChange(obj) {
      // console.log(obj.sortField)
      // console.log(obj.sortOrder)
      // if (obj.sortField == 'warningTotal') {
      //   if (obj.sortOrder == 'ascend') {
      //     this.pageFilter.sort = 'asc'
      //   } else {
      //     this.pageFilter.sort = 'desc'
      //   }
      // }
      this.pageFilter.pageNo = obj.currentPage
      this.pageFilter.pageSize = obj.pageSize
      this.refreshTable()
    },
    onDetail(value) {
      this.$router.push({
        path: '/earlyWarning/portrait/detail',
        query: {
          victimId: value
        }
      })
    },
    // 发送时间-自定义开始日期【不可选择的日期】
    disabledStartDate(startValue) {
      const endValue = Object.keys(this.pageFilter).length > 0 && this.pageFilter.foundTimeEnd
        ? this.$JMoment(this.pageFilter.foundTimeEnd) : null
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > endValue.valueOf()
    },
    // 发送时间-自定义结束日期【不可选择的日期】
    disabledEndDate(endValue) {
      const startValue = Object.keys(this.pageFilter).length > 0 && this.pageFilter.foundTimeStart
      ? this.$JMoment(this.pageFilter.foundTimeStart) : null
      if (!endValue || !startValue) {
        return false
      }
      return startValue.valueOf() >= endValue.valueOf()
    },
    // 发送时间-自定义日期【控制弹层是否展开】
    handleOpenChange(open, status) {
      if (status==='start' && !open) {
        this.endOpen = true
      }
      if (status==='end') {
        this.endOpen = open
      }
    }
  }
}
</script>
<style scoped lang="less">
.con-content-top {
  margin-bottom: 20px;
}
/deep/#advance-btn {
  display: none;
}
.con-content-top button {
  margin-right: 15px;
}

.zt {
  display: inline-block;
  width: 70px !important;
  padding: 2px 0;
  border-radius: 5px;
  color: #fff;
}
.zt1 {
  color: #3fb674;
  background-color: #e4fff0;
}
.zt2 {
  color: #56acf2;
  background-color: #dceefd;
}
.zt3 {
  color: #f9b01e;
  background-color: #fef3dc;
}
.zt4 {
  color: #fd586c;
  background-color: #ffe9e7;
}
.zt5 {
  color: #b40aba;
  background-color: #fecdff;
}
// .zt4 {
//   color: #d9001b;
//   border: 1px solid #d9001b;
//   text-align: center;
// }
// .zt5 {
//   color: #999;
//   border: 1px solid #999;
//   text-align: center;
// }
/deep/ .ant-tag {
  width: 6vw;
  text-align: center;
}

/deep/ .ant-tag {
  margin-top: 10px;
}
/deep/ .tagItem:nth-child(n + 5) {
  display: none;
}
.icon {
  position: absolute;
  right: 0;
  top: 24px;
}
/deep/ .ant-table td {
  position: relative;
  .t0 {
    position: absolute;
    top: 16px;
    left: 34.2%;
    color: #1890ff;
  }
}
.table_box {
  width: 900px;
  tr {
    .t1 {
      min-width: 10vh;
    }
    .t2 {
      width: 30vh;
      text-align: left;
    }
  }
  tr:nth-child(1) {
    .t2:nth-child(2) {
      color: #d9001b;
    }
  }
}
.date-range-picker {
  // width: 280px;
  display: inline-flex;
  align-items: center;
  .ant-calendar-picker {
    min-width: 47% !important;
  }
  .line {
    padding: 0 4px;
  }
}
</style>
